<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>固定定位</title>
    <style>
        body{
            height: 2000px;
        }

        .box1{
            width: 400px;
            height: 400px;
            background-color: #bfa;
        }

        .box2{
            width: 300px;
            height: 300px;
            background-color: orange;

        }

        .box3{
            width: 100px;
            height: 100px;
            background-color: tomato;

            position: fixed;

            top: 0;
            left: 0;

            /* 
                固定定位
                    - 将position属性设置fixed即开启了元素的固定定位
                    - 固定也是一种绝对定位，它的大部分特点都和绝对定位相同
                    - 不同点在于他们定位的定位的参照物不同
                        固定定位元素总是相对于视口（viewport）进行定位
                            视口就是浏览器的窗口
                    - 固定定位元素会固定在视口中，不会随网页一起滚动

            
            */
        }
    </style>
</head>
<body>

    <div class="box1">
        <div class="box2">
            <div class="box3"></div>
        </div>
    </div>
    
</body>
</html>